<template>
  <view v-if="visible" class="modal-overlay1">
    <view class="content1">
      <view class="modal-header">
        <text>{{ title }}</text>
      </view>
      <view class="modal-body">
			<!-- <view class="modal-container">
			  <span class="modal-item">今日</span>
			  <span class="modal-item">昨天</span>
			  <span class="modal-item">前三日</span>
			  <span class="modal-item">本月</span>
			  <span class="modal-item">本年</span>
			  <span class="modal-item"></span>
			</view> -->
			<div class="grid-container">
			  <div class="grid-item" @click="showToday">今日</div>
			  <div class="grid-item" @click="showYesterday">昨天</div>
			  <div class="grid-item" @click="showThreeDaysAgo">前三日</div>
			  <div class="grid-item" @click="showThisMonth">本月</div>
			  <div class="grid-item" @click="showThisYear">本年</div>
			</div>
		  <p class="modal-text">开始日期</p>
		  <view class="input-box" @click="modelshow">{{inputValue}}
		  </view>
		  <p class="modal-text">结束日期</p>
		  <view class="input-box" @click="periodshow">{{periodValue}}
		  </view>
		  
		  <view class="modal-footer">
		  		  <span @click="closeShow" class="quxiao" >取消</span><span class="yuyue" @click="addCilck">确定</span>
		  </view>
		  
		  </view>
		  <div class="model" v-if="ismodelshow">
		    <span class="modal-date" v-if="ismodelshow">
		  	  <view class="slider" v-if="showSlider" :style="sliderStyle">
		  		  <p>请选择日期</p>
		  		  <datetimepicker  ref="pickerDate" @reset="reset" @confirm="confirm" @show="show" @close="close" :successStartTime="successStartTime" :successEndTime="successEndTime"></datetimepicker>
		  	  </view>
		   </span>
		  </div>
		 <div class="model2" v-if="ismodelperiod">
		   <span class="modal-date" v-if="ismodelperiod">
		 	  <view class="slider" v-if="showSlider" :style="sliderStyle">
		  		  <p>请选择日期</p>
		  		  <datetimepicker  ref="pickerDate" @reset="reset" @confirm="confirm2" @show="show" @close="close" :successStartTime="successStartTime" :successEndTime="successEndTime"></datetimepicker>
		  	  </view>
		   </span>
		  </div>
		  </view>
    </view>
  </view>
</template>

<script>
	import datetimepicker from '@/pages/components/datetime/datetime.vue';
	import {getAll,getAllOrder} from '@/api/appointment.js';
export default {
	 components: {
		datetimepicker
	 },
	 props: {
	     userId: {
	       type: Number,
	       required: true
	     },
		 phone:{
		 	 type: String,
		 	 required: true
		 }
	   },
  data() {
    return {
      visible: false,
      title: '预约',
      inputValue: '',
	  selectedValue: '',
	        options: [
	          { value: 'option1', label: '选项1' },
	          { value: 'option2', label: '选项2' },
	          // ...更多选项
	        ],
	  selectedDate: '' ,// 存储选中的日期,
	  ismodelshow:false,//时间
	  successStartTime:'',
	  successEndTime:'',
	  showSlider: false,
	  ismodelperiod:false,//时间段
	  periodValue:'',
	  req:{
		  name:'',
		  phone:'',
		  password:'',
		  subaccountId:0
	  },
	  textareaContent:'',
		isRequesting: false, // 标记是否正在请求
    };
  },
  mounted(){
  	const now = new Date();
  	// 设置开始时间为当前时间（可以根据需要调整）
  	this.successStartTime = this.formatDate(now);
	//默认显示
	this.inputValue=this.formatDate1(now,'YYYY-MM-DD');
	this.periodValue=this.formatDate1(now,'YYYY-MM-DD');
  	// 设置结束时间为当前时间加上一定的时间间隔（例如1小时），或者保持为当前时间（如果需要）
  	// 这里我们简单地设置为当前时间（同开始时间），但你可以根据需要调整
  	this.successEndTime = this.formatDate(now); // 或者 this.successEndTime = this.addHoursToDate(now, 1);
  	      
  },
  methods: {
	   async getList() {
	      if (this.isRequesting) {
	        uni.showToast({
	          title: "请等待当前请求完成",
	          icon: "none",
	        });
	        return;
	      }
	   
	      this.isRequesting = true;
	      console.log(this.phone);
	      this.req.beginTime = this.inputValue;
	      this.req.endTime = this.periodValue;
	      this.req.contactInformation = this.phone;
	   
	      try {
	        const res = await getAll(this.req);
	        let result = res.data.data;
	        const res2 = await getAllOrder(this.req);
	        let newItem = res2.data.data;
	        console.log(newItem);
	        newItem.forEach((item) => {
	          result.push(item);
	        });
	        this.$emit("confirm", result);
	        this.visible = false;
	      } catch (error) {
	        uni.showToast({
	          title: "查询失败，请重试",
	          icon: "error",
	        });
	      } finally {
	        this.isRequesting = false; // 请求完成，允许再次请求
	      }
	    },
	  // 获取当前日期并显示
	      showToday() {
	        const today = new Date();
	        this.inputValue = this.formatDate3(today);
			this.periodValue = this.formatDate3(today);
			this.getList();
	      },
	      // 获取昨天的日期并显示
	      showYesterday() {
	        const yesterday = new Date();
			const today = new Date();
	        yesterday.setDate(yesterday.getDate() - 1);
	        this.inputValue = this.formatDate3(yesterday);
			this.periodValue = this.formatDate3(today);
			this.getList();
	      },
	      // 获取前三天的日期并显示
	      showThreeDaysAgo() {
	        const threeDaysAgo = new Date();
			const today = new Date();
	        threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
	        this.inputValue = this.formatDate3(threeDaysAgo);
			this.periodValue = this.formatDate3(today);
			this.getList();
	      },
	      // 获取本月第一天的日期并显示
	      showThisMonth() {
	        const firstDayOfMonth = new Date();
			const today = new Date();
	        firstDayOfMonth.setDate(1);
	        this.inputValue = this.formatDate3(firstDayOfMonth);
			this.periodValue = this.formatDate3(today);
			this.getList();
	      },
	      // 获取本年第一天的日期并显示
	      showThisYear() {
	        const firstDayOfYear = new Date();
			const today = new Date();
	        firstDayOfYear.setMonth(0); // 设置月份为0（即一月）
	        firstDayOfYear.setDate(1);  // 设置日期为1（即一号）
	        this.inputValue = this.formatDate3(firstDayOfYear);
			this.periodValue = this.formatDate3(today);
			this.getList();
	      },
	      // 格式化日期为 YYYY-MM-DD
	      formatDate3(date) {
	        const year = date.getFullYear();
	        const month = String(date.getMonth() + 1).padStart(2, '0');
	        const day = String(date.getDate()).padStart(2, '0');
	        return `${year}-${month}-${day}`;
	      },
	  addCilck(){
		  this.getList();
	  },
	  periodshow(){
		  this.ismodelperiod = true;
		  this.showSlider = true;
	  },
	  show(data){
		  this.ismodelshow = data;
	  },
	  showItem(){
		  console.log(this.phone);
	  },
	  confirm(data){
		 // 这里是处理从子组件接收到的数据的代码
		 if(data.year==undefined){
			  this.periodValue=data.half;
			  
		 }else{
			this.inputValue=data.year+'-'+data.month+'-'+data.day; 
		 }
		this.ismodelshow = false;
		this.ismodelperiod=false;
	  },
	  confirm2(data){
	  		 // 这里是处理从子组件接收到的数据的代码
	  		 if(data.year==undefined){
	  			  this.periodValue=data.half;
	  			  
	  		 }else{
	  			this.periodValue=data.year+'-'+data.month+'-'+data.day; 
	  		 }
	  		this.ismodelshow = false;
	  		this.ismodelperiod=false;
	  },
	  closeDate(){
		  this.ismodelshow = false;
	  },
	  closeShow(){
		  this.visible = false;
	  },
	  modelshow(){
		 this.showSlider = true;
		 this.ismodelshow = true;
		  // 移除 <textarea> 的焦点
	  },
    showModal(title, callback,phone) {
      this.title = title;
      this.callback = callback;
      this.visible = true;
	  this.phone=phone;
      // 可以在这里重置 inputValue，如果需要的话
	  // this.periodValue='';
	  // this.textareaContent='';
   //    this.inputValue = '';
    },
	formatDate(date) {
	  // 根据你的需求格式化日期
	  // 这里是一个简单的例子，将日期格式化为 YYYY-MM-DDTHH:mm:ss
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
	  const day = String(date.getDate()).padStart(2, '0');
	  const hours = String(date.getHours()).padStart(2, '0');
	  const minutes = String(date.getMinutes()).padStart(2, '0');
	  const seconds = String(date.getSeconds()).padStart(2, '0');
	  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
	},
	formatDate1(date, format = 'YYYY-MM-DDTHH:mm:ss') {
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
	  const day = String(date.getDate()).padStart(2, '0');
	  const hours = String(date.getHours()).padStart(2, '0');
	  const minutes = String(date.getMinutes()).padStart(2, '0');
	  const seconds = String(date.getSeconds()).padStart(2, '0');
	 
	  // 使用模板字符串和条件替换来支持多种格式
	  return format
	    .replace('YYYY', year)
	    .replace('MM', month)
	    .replace('DD', day)
	    .replace('HH', hours)
	    .replace('mm', minutes)
	    .replace('ss', seconds)
	    .replace('T', ' '); // 可选：将 T 替换为空格或其他字符，如果不需要时间分隔符
	},
    closeModal() {
      this.visible = false;
      if (this.callback && typeof this.callback.onCancel === 'function') {
        this.callback.onCancel();
      }
    },
    confirmInput() {
      this.visible = false;
      if (this.callback && typeof this.callback.onConfirm === 'function') {
        this.callback.onConfirm(this.inputValue);
      }
    }
  }
};
</script>

<style scoped>
@import "all.css";
</style>